<template>
  <div>
    <panel-head :route="route" />
    <div class="form">
      <el-form
        ref="formRef"
        label-width="100px"
        label-position="left"
        :model="searchForm"
        :inline="true"
      >
        <el-form-item prop="out_trade_no">
          <el-input v-model="searchForm.out_trade_no" placeholder="订单号" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submmit"> 搜索</el-button>
        </el-form-item>

      </el-form>
    </div>
    <el-table :data="tabData.list" style="width: 100%">
      <el-table-column prop="out_trade_no" label="订单号" width="150" fixed="left" />
      <el-table-column prop="hospital_name" label="就诊医院" />
      <el-table-column label="培护师头像">
        <template #default="scope">
          <el-image
            style="width: 40px; height: 40px"
            :src="scope.row.companion.avatar"
          />
        </template>
      </el-table-column>

      <el-table-column label="培护师手机号" width="120">
        <template #default="scope">
          {{ scope.row.companion.mobile }}
        </template>
      </el-table-column>
      <el-table-column prop="price" label="总价" />
      <el-table-column prop="paidPrice" label="已付" />

      <el-table-column label="下单时间" width="120">
        <template #default="scope">
          {{ dayjs(scope.row.order_start_time).format('YYYY-MM-DD') }}
        </template>
      </el-table-column>

      <el-table-column label="订单状态">
        <template #default="scope">
          <el-tag :type="statuMap(scope.row.trade_state)">
            {{ scope.row.trade_state }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="service_state" label="接单状态" />
      <el-table-column prop="tel" label="联系人手机号" width="120" />

      <el-table-column label="操作" width="120" fixed="right">
        <template #default="scope">
          <el-popconfirm
            v-if="scope.row.trade_state==='待服务'"
            confirm-button-text="是"
            cancel-button-text="否"
            :icon="InfoFilled"
            icon-color="#626AEF"
            title="是否确认完成?"
            @confirm="confirmEvent(scope.row.out_trade_no)"
          >
            <template #reference>
              <el-button type="primary" link> 服务完成</el-button>
            </template>
          </el-popconfirm>
          <el-button
            v-else
            type="primary"
            link
            disabled
          >
            暂无服务
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-info">
      <el-pagination
        v-model:current-page="paginationData.pageNum"
        :page-size="paginationData.pageSize"
        :background="false"
        size="small"
        layout="->, total, prev, pager, next"
        :total="tabData.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

  </div>
</template>

<script setup>
import { ref, reactive, onMounted, nextTick } from 'vue'
import { adminOrder, updateOrder } from '../../../api'
import { InfoFilled } from '@element-plus/icons-vue'
import { useRoute } from 'vue-router'
import dayjs from 'dayjs'

const route = useRoute()

onMounted(() => {
  getListData()
})

const tabData = reactive({
  list: [],
  total: 0
})

const paginationData = reactive({
  pageNum: 1,
  pageSize: 10
})

// 表单搜索
const searchForm = reactive({
  out_trade_no: ''
})

const submmit = () => {
  getListData(searchForm)
}

// 点击页码
// eslint-disable-next-line no-unused-vars
const handleSizeChange = (val) => {
  paginationData.pageNum = val
  getListData()
}

// 选择页面
// eslint-disable-next-line no-unused-vars
const handleCurrentChange = (val) => {
  paginationData.pageSize = val
  getListData()
}

// 请求列表数据
const getListData = (param = {}) => {
  adminOrder({ ...paginationData, ...param }).then(({ data }) => {
    if (data.code === 10000) {
      const { list, total } = data.data
      tabData.list = list
      tabData.total = total

      console.log(data)
    }
  })
}

const statuMap = (key) => {
  const obj = {
    '已取消': 'info',
    '待支付': 'warning',
    '已完成': 'success'
  }
  return obj[key]
}

const confirmEvent = (id) => {
  updateOrder({ id }).then(({ data }) => {
    if (data.code === 10000) {
      getListData()
    }
  })
}

</script>

<style lang="less"  scoped>
.form{
  display: flex;
  justify-content: flex-end;
  padding: 10px 0 10px 0;
  background-color: #fff;
}
</style>
